<template>
  <div class="dic-table-box" :style="{ height: height }">
    <template>
      <vxe-table
        style="min-height: 100px"
        ref="vxeTable"
        :auto-resize="true"
        :loading="loading"
        :data="tableData"
        v-bind="$attrs"
        v-on="$listeners"
        @checkbox-change="checkboxChangeEvent"
        @checkbox-all="checkboxChangeEvent"
        :tooltip-config="tableTooltipConfig"
      >
        <template v-for="(config, index) in columnData">
          <vxe-table-column v-if="config.slotName" :key="index" v-bind="config">
            <!-- 自定义插槽列 -->
            <template #header>
              <slot :name="config.slotName + 'header'">{{ config.title }}</slot>
            </template>
            <template #default="{ row, rowIndex }">
              <slot :name="config.slotName" :row="row" :index="rowIndex">{{
                row[config.slotName]
              }}</slot>
            </template>
            <template #footer="{ items, _columnIndex }">
              <slot
                :name="config.slotName + 'footer'"
                :items="items"
                :columnIndex="_columnIndex"
              ></slot>
            </template>
            <template #filter="{ $panel, column }">
              <slot
                :name="config.slotName + 'filter'"
                :panel="$panel"
                :column="column"
              ></slot>
            </template>
          </vxe-table-column>
          <vxe-table-column
            v-else
            show-header-overflow
            show-overflow
            :key="index"
            v-bind="config"
          ></vxe-table-column>
        </template>
      </vxe-table>
    </template>

    <vxe-pager
      v-if="pager"
      background
      :loading="loading"
      @page-change="handlePageChange"
      :current-page="currentPage"
      :page-sizes="pageSizeArr"
      :page-size="pageSize"
      :layouts="[
        'PrevJump',
        'PrevPage',
        'JumpNumber',
        'NextPage',
        'NextJump',
        'Sizes',
        'FullJump',
        'Total',
      ]"
      :total="totalResult"
      size="medium"
    >
    </vxe-pager>
  </div>
</template>

<script>
import Vue from "vue";
import "xe-utils";
import VXETable from "vxe-table";
import "vxe-table/lib/style.css";

Vue.use(VXETable);

VXETable.setup({
  version: 0,
  zIndex: 99999, // 想多高就设置多高
  table: {
    autoResize: true,
  },
});

export default {
  props: {
    loading: {
      type: Boolean,
      default: false,
    },
    //是否分页
    pager: {
      type: Boolean,
      default: false,
    },
    // 列配置
    columnData: {
      type: Array,
      default: () => [],
    },
    // 表数据
    tableData: {
      type: Array,
      default: () => [],
    },
    tableTooltipConfig: {
      type: Object,
      default: () => {},
    },
    height: { Number, String },
    currentPage: Number,
    pageSizeArr: {
      type: Array,
      default: () => [10, 12, 20, 30, 50, 100, 200],
    },
    pageSize: {
      type: Number,
      default: 10,
    },
    totalResult: {
      type: Number,
      default: 0,
    },
  },
  computed: {},
  methods: {
    handlePageChange({ currentPage, pageSize }) {

      this.$emit("on-page-change", { currentPage, pageSize });
    },
    checkboxChangeEvent(val) {
      this.$emit("checked-data", val.selection, val.checked);
    },
    getRefs() {
      return this.$refs.vxeTable;
    },
  },
};
</script>

<style lang="scss">
.dic-table-box {
  .header-row-class {
    background-color: #f2f2f2;
  }
  .ne-row-class {
    cursor: pointer;
  }
  .el-table {
    //width: 99.9%;
  }
  .m-pagination {
    margin-top: 0.1rem;
    text-align: right;
  }
  .vxe-table--render-default .vxe-body--column:not(.col--ellipsis),
  .vxe-table--render-default .vxe-footer--column:not(.col--ellipsis) {
    padding: 0.05rem 0;
  }
  .vxe-table--render-default .vxe-header--column:not(.col--ellipsis) {
    padding: 0.13rem 0;
  }
  .vxe-header--column {
    color: $textColor1;
  }
  .vxe-header--column .vxe-cell--title {
    font-size: $fontSize_base;
    color: #333;
  }
  .vxe-table--render-default {
    color: $textColor1;
  }
  .is--enterable {
    z-index: 100000 !important;
  }
}
</style>
